<template>
  <mescroll-uni
    ref="mescrollRef"
    @init="mescrollInit"
    height="100%"
    top="60"
    @down="downCallback"
    @up="upCallback"
  >
    <view
      v-for="(it, index) in list"
      @click="goDetails(it)"
      class="item"
      :style="{ marginTop: index ? '32rpx' : '' }"
    >
      <view style="padding: 0 24rpx">
        <view class="time">
          <view style="display: flex">
            <!-- <text>{{it.kssj?it.kssj.substring(0,16):''}} ~ {{it.status=='2'&&it.jssj?it.jssj.substring(0,16):''}}</text> -->
          </view>
          <view
            :style="{
              lineHeight: '34rpx',
              color:
                it.status == '2'
                  ? '#62CBAA'
                  : it.status == '1'
                  ? '#F6C464'
                  : '#969CA9',
            }"
          >
            <image
              :src="`../../../static/image/status_${
                it.status == '2' ? 'g' : it.status == '1' ? 'y' : 'r'
              }.png`"
            />
            {{
              it.status == "0"
                ? "已发起"
                : it.status == "1"
                ? "处理中"
                : "已完结"
            }}
          </view>
        </view>
        <!-- <view class="time">
					<view style="display: flex">
						<view class="index">{{index+1}}</view>
						<text>{{it.kssj||'--'}} ~ {{it.jssj||'--'}}</text>
					</view>
				</view> -->
        <!-- <view class="cu-progress radius striped active"> -->
        <!-- <view class="bg-red" :style="[{ width:'30%'}]">30%</view> -->
        <!-- <view class="bg-olive"  :style="[{ width:'45%'}]">45%</view> -->
        <!-- <view class="bg-cyan" :style="[{ width:'25%'}]">25%</view> -->
        <!-- </view> -->
        <view
          style="
            font-size: 32rpx;
            font-weight: bold;
            margin-top: 12px;
            color: #434343;
          "
        >
          {{ it.jh_mc }}
        </view>
        <view class="details">
          <view>
            <view
              style="
                display: flex;
                justify-content: space-between;
                color: #9197b0;
              "
            >
              工单编号：
            </view>
            <view
              style="
                display: flex;
                justify-content: space-between;
                color: #9197b0;
              "
            >
              派发时间：
            </view>
            <view
              style="
                display: flex;
                justify-content: space-between;
                color: #9197b0;
              "
            >
              开始时间：
            </view>
            <view
              style="
                display: flex;
                justify-content: space-between;
                color: #9197b0;
              "
            >
              结束时间：
            </view>
          </view>
          <view class="details_right">
            <view>{{ it.gdh || "--" }}</view>
            <view :style="{ color: i == '' || i == '0' ? '#434343' : '' }">{{
              it.scsj ? it.scsj.substring(0, 16) : "--"
            }}</view>
            <view :style="{ color: i == '1' ? '#434343' : '' }">{{
              it.kssj ? it.kssj.substring(0, 16) : "--"
            }}</view>
            <view :style="{ color: i == '2' ? '#434343' : '' }">{{
              it.jssj ? it.jssj.substring(0, 16) : "--"
            }}</view>
          </view>
        </view>
      </view>
    </view>
  </mescroll-uni>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
import API from "@/common/api.js";
export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
  components: {},
  data() {
    return {
      list: [], //列表数据
      clickFlag: true,
      param: {
        owner: "y",
        page: 1,
        pagesize: 10,
        keywords: "",
        pzhAuthorization: uni.getStorageSync("pzhAuthorization"),

        year: "",
        month: "",
      },
    };
  },
  props: {
    keywords: String,
    year: String,
    month: String,
    i: String,
  },
  methods: {
    //刷新
    triggerDownScroll() {
      this.mescroll.triggerDownScroll();
    },
    /*下拉刷新的回调 */
    downCallback() {
      // 这里加载你想下拉刷新的数据, 比如刷新轮播数据
      // loadSwiper();
      // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll();
    },

    clear() {
      this.param.year = "-1";
    },
    //条件查询
    resetParam() {
      if (
        this.keywords != this.param.keywords ||
        this.year != this.param.year ||
        this.month != this.param.month
      ) {
        this.triggerDownScroll();
      }
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.param.status = this.i;
      this.param.keywords = this.keywords;
      this.param.year = this.year;
      this.param.month = this.month;
      this.param.page = page.num;

      console.log(this.param, 4444);
      API.selectXjgd(this.param).then((res) => {
        setTimeout(
          () => {
            if (res.resCode == "success") {
              uni.hideLoading();
              if (page.num == 1) {
                this.list = [];
              }
              this.list = this.list.concat(res.datas);
              this.mescroll.endBySize(res.datas.length, res.total);
            } else {
              this.list.length
                ? this.mescroll.endErr()
                : this.mescroll.endBySize(0, 0);
            }
          },
          page.num == 1 ? 500 : 0
        );
      });
    },
    goDetails(data) {
      uni.navigateTo({
        url:
          "./inspectDetails?data=" + encodeURIComponent(JSON.stringify(data)), //JSON.stringify({id:data.id,zxzt:data.zxzt,xjlx_desc:data.xjlx_desc,xjmb_desc:data.xjmb_desc,fxid_desc:data.fxid_desc,jddgl_fxydj_desc:data.jddgl_fxydj_desc})
      });
    },
  },
};
</script>
<style lang="less" scoped>
@keyframes progress-stripes {
  from {
    background-position: 72upx 0;
  }

  to {
    background-position: 0 0;
  }
}
.cu-progress {
  overflow: hidden;
  height: 28upx;
  background-color: #ebeef5;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.cu-progress + view,
.cu-progress + text {
  line-height: 1;
}

.cu-progress.xs {
  height: 10upx;
}

.cu-progress.sm {
  height: 20upx;
}

.cu-progress view {
  width: 0;
  height: 100%;
  align-items: center;
  display: flex;
  justify-items: flex-end;
  justify-content: space-around;
  font-size: 20upx;
  color: #ffffff;
  transition: width 0.6s ease;
}
.bg-olive {
  background-color: #8dc63f;
  color: #ffffff;
}

.cu-progress text {
  align-items: center;
  display: flex;
  font-size: 20upx;
  color: #333333;
  text-indent: 10upx;
}

.cu-progress.text-progress {
  padding-right: 60upx;
}

.cu-progress.striped view {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 72upx 72upx;
}

.cu-progress.active view {
  animation: progress-stripes 2s linear infinite;
}
.radius {
  border-radius: 6upx;
}

.item:active {
  background: #e6e6e6;
}
.item {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 48rpx);
  margin-left: 24rpx;
  padding: 32rpx 0;
  background: #fafbfa;
  border-radius: 8rpx;
  image {
    width: 136rpx;
    height: 144rpx;
    display: block;
  }
  .right {
    width: calc(100% - 184rpx);
    margin-left: 24rpx;
  }
  .title {
    font-size: 28rpx;
    font-weight: 600;
    color: #1f2142;
    line-height: 40rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    image {
      width: 22rpx;
      height: 24rpx;
      margin: 6rpx 22rpx 0 0;
    }
  }
  .time {
    margin: 8rpx 0;
    display: flex;
    justify-content: space-between;
    width: calc(100vw - 96rpx);
    .index {
      min-width: 20rpx;
      padding: 0 6rpx;
      height: 32rpx;
      background: red;
      border-radius: 32rpx;
      border: 2rpx solid rgba(86, 140, 229, 1);
      justify-content: center;
      color: white;
      background-image: linear-gradient(
        90deg,
        rgba(86, 140, 229, 1) 0%,
        rgba(58, 200, 221, 1) 100%
      );
      margin-right: 16rpx;
    }
    text {
      font-size: 24rpx;
      color: #9197ae;
    }
    view {
      display: flex;
      font-size: 22rpx;
      color: #62cbaa;
      image {
        width: 32rpx;
        height: 32rpx;
        margin: 0rpx 4rpx 0 0;
      }
    }
  }
  .progress {
    display: flex;
    margin: 30rpx 0;
    font-size: 26rpx;
    color: #454e64;
    padding-bottom: 30rpx;
    border-bottom: 2rpx solid #f5f5f5;
    view {
      width: 50%;
    }
    view:first-child {
      border-right: 2rpx solid rgb(236, 237, 241);
      padding-right: 40rpx;
    }
    view:last-child {
      padding-left: 40rpx;
    }
  }
  .details {
    font-size: 28rpx;
    font-weight: 400;
    color: #9197b0;
    display: flex;
    margin-top: 20rpx;
    text {
      color: #454e64;
    }
    .details_right {
      view {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
    }
  }
}
</style>